服务端渲染 (SSR) 教程
1. 什么是服务端渲染 (SSR)？
服务端渲染（Server-Side Rendering，简称 SSR）是一种在服务器端生成 HTML 内容并将其发送到客户端的技术。与传统的客户端渲染（Client-Side Rendering，简称 CSR）不同，SSR 在服务器端完成页面的渲染，客户端接收到的是已经渲染好的 HTML 页面。
1.1 为什么需要 SSR？
- SEO 优化：搜索引擎爬虫更容易抓取和索引 SSR 生成的页面。
- 首屏加载速度：SSR 可以减少首屏加载时间，因为页面内容在服务器端已经生成。
- 更好的用户体验：用户可以更快地看到页面内容，而不需要等待 JavaScript 文件加载和执行。
2. Vue.js 中的 SSR
Vue.js 提供了对 SSR 的支持，通过 vue-server-renderer 包可以在服务器端渲染 Vue 应用。
2.1 基本概念
- 客户端渲染 (CSR)：Vue 应用在浏览器中运行，所有的渲染逻辑都在客户端执行。
- 服务端渲染 (SSR)：Vue 应用在服务器端运行，生成 HTML 内容并发送到客户端。
2.2 SSR 的工作流程
- 服务器端渲染：服务器接收到请求后，运行 Vue 应用并生成 HTML 内容。
- 客户端激活：客户端接收到 HTML 内容后，Vue 应用在客户端进行激活，接管页面的交互逻辑。
3. 创建一个简单的 SSR 应用
3.1 安装依赖
首先，我们需要安装一些必要的依赖：
npm install vue vue-server-renderer express
3.2 创建 Vue 应用
创建一个简单的 Vue 应用：
// app.js
import Vue from 'vue';
const app = new Vue({
template: `<div>Hello, SSR!</div>`
});
export { app };
3.3 创建服务器
创建一个简单的 Express 服务器，用于渲染 Vue 应用：
// server.js
import express from 'express';
import { createRenderer } from 'vue-server-renderer';
import { app } from './app';
const server = express();
const renderer = createRenderer();
server.get('*', (req, res) => {
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error');
return;
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>Hello</title></head>
<body>${html}</body>
</html>
`);
});
});
server.listen(8080);
3.4 运行服务器
启动服务器：
node server.js
打开浏览器访问 http://localhost:8080，你应该会看到 "Hello, SSR!" 的页面。
4. 实践练习
4.1 练习目标
创建一个简单的 SSR 应用，展示当前时间。
4.2 步骤
- 修改 Vue 应用：在
app.js中添加一个显示当前时间的组件。
// app.js
import Vue from 'vue';
const app = new Vue({
template: `<div>Current Time: {{ time }}</div>`,
data() {
return {
time: new Date().toLocaleTimeString()
};
}
});
export { app };
- 运行服务器：启动服务器并访问页面，你应该会看到当前时间的动态更新。
5. 进一步学习
5.1 Nuxt.js
Nuxt.js 是一个基于 Vue.js 的服务端渲染框架，提供了更高级的功能和更好的开发体验。你可以通过学习 Nuxt.js 来进一步掌握 SSR 技术。
5.2 静态站点生成 (SSG)
静态站点生成（Static Site Generation，简称 SSG）是另一种生成静态 HTML 文件的技术，适用于不需要频繁更新的内容。
5.3 性能优化
在实际项目中，SSR 的性能优化是一个重要的课题。你可以学习如何通过缓存、代码分割等技术来提高 SSR 应用的性能。
6. 总结
服务端渲染（SSR）是提高 Vue.js 应用性能和 SEO 的重要技术。通过本教程，你已经学会了如何创建一个简单的 SSR 应用，并了解了 SSR 的基本概念和工作流程。希望你能继续深入学习，掌握更多高级的 SSR 技术。